
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Services Directory&trade; Departments</title>
<!-- Combined stylesheets load -->
<!-- Load either 960.gs.fluid or 960.gs to toggle between fixed and fluid layout -->
<link href="css/main.css"
	tppabs="http://www.display-inline.fr/demo/constellation/template/css/mini.php?files=reset,common,form,standard,960.gs.fluid,simple-lists,block-lists,planning,table,calendars,wizard,gallery"
	rel="stylesheet" type="text/css">
<!-- Modernizr for support detection, all javascript libs are moved right above </body> for better performance -->
<script src="js/libs/modernizr.custom.min.js"
	tppabs="http://www.display-inline.fr/demo/constellation/template/js/libs/modernizr.custom.min.js"></script>
<link href="css/cssTable.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/lib.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		//Bat su kien click vao nut check box
		$('#checkboxActive').click(function() {
			var thisCheck = $(this);
			if (thisCheck.is(':checked')) {
				$('form#getIncludeAcvive #id_includeInActive').val(true);
				$('form#getIncludeAcvive').submit();
			} else {
				$('form#getIncludeAcvive #id_includeInActive').val(false);
				$('form#getIncludeAcvive').submit();
			}
		});
	});
</script>
<script type="text/javascript">
	function validateDepartment() {
		var checkAdd;
		var errorMessage = "";
		var dpName = document.forms["complex_form"]["departmentName"].value;
		var dpDes = document.forms["complex_form"]["shortDescription"].value;
		if (dpName == "" || dpName == null) {
			errorMessage += "Department name can't be empty !<br/>";
			checkAdd = false;
		} 
		if (dpDes == "" || dpDes == null) {
			errorMessage += "Department description can't be empty !<br/>";
			checkAdd = false;
		}
		if (checkAdd == false) {
			document.getElementById('message').innerHTML = errorMessage;
			var myError = document.getElementById("message");
			myError.style.color = "red";
		}
		else {
			document.forms["complex_form"].submit();
		}

	}

	function changeIsActive() {
		var elem = document.getElementById("activeDirectorate");
		var isActive = document.getElementById("active");
		// 		alert(elem.innerHTML + "\n" + "<span class=\"smaller\"><img src=\"images/icons/fugue/flag.png\" width=\"16\" height=\"16\"><strong class=\"tmpAc\">In-active</strong></span>");
		if (elem.innerHTML == "<span class=\"smaller\"><img src=\"images/icons/fugue/flag.png\" width=\"16\" height=\"16\"><strong class=\"tmpAc\">In-active</strong></span>") {
			var confirmActive = confirm("Are you sure to In-active this directorate?");
			if (confirmActive) {
				elem.innerHTML = "<span class='smaller'><img height='16' width='16' src='images/icons/fugue/flag.png' /><strong class='tmpAc'>Active</strong></span>";
				isActive.value = 0;
			}
		} else {
			var confirmDeactive = confirm("Are you sure to active this directorate?");
			if (confirmDeactive) {
				elem.innerHTML = "<span class='smaller'><img height='16' width='16' src='images/icons/fugue/flag.png' /><strong class='tmpAc'>In-active</strong></span>";
				isActive.value = 1;
			}
		}
	}

	function formSubmit() {
		document.forms["complex_form"].submit();
	}
</script>
</head>
<%@include file='header.jsp'%>


<!-- Status bar -->
<!-- End status bar -->


<section class="grid_8">
<div class="block-border">
	<form class="block-content form" id="complex_form" method="get"
		action="addDepartment" name="addDepartment">
		<h1>Department</h1>
		<div class="block-controls"></div>
		<ul class="message warning no-margin">
			<li id="message"  > <s:property value="error"/><%-- This is a <strong>warning message</strong>,
				inside a box --%>
			</li>
			<li class="close-bt"></li>
		</ul>
		<div class="columns">
			<div>
				<ul class="tabs js-tabs same-height">
					<li class="current"><a href="#tab-details1">Details</a></li>

				</ul>
				<div class="float-right" style="margin: -2.5em 2em 0 0;">

					<a class="button" title="Save" style="cursor: pointer;"
						onclick="formSubmit()" id="saveBtn"> <span class="smaller"><img
							height="16" width="16" src="images/icons/fugue/tick-circle.png"><strong>
								Save </strong> </span>
					</a> <a class="button" title="Back" style="cursor: pointer;"
						onclick="history.go(-1);"> <span class="smaller"><img
							height="16" width="16"
							src="images/icons/fugue/navigation-180.png"><strong>
								Back </strong> </span>
					</a>

				</div>

				<div class="tabs-content">

					<!-- Tab details 1 -->
					<div id="tab-details1" style="overflow: hidden;">
						<div style="float: left; width: 48%; overflow: hidden">
							<p class="colx2-left">


								<s:hidden name="contactID" id="lu.contactId" />
								<s:hidden name="typeOfBusinessID" id="lu.typeOfBusinessID" />
								<s:hidden name="directorateID" id="directorateID" />

								<s:hidden name="department.active" id="active" />
							</p>
							<p class="colx2-left"
								style="width: 100%; margin-bottom: 10px; float: left;">
								<label for="complex-en-url"
									style="line-height: 30px; float: left; margin-right: 20px; width: 38%">Department
									Name <font color="red">*</font>
								</label>
								<s:textfield name="departmentName" id="departmentName" cssClass="full-width"
									style="width: 55%;"></s:textfield>
							</p>

							<p class="colx2-left"
								style="width: 100%; margin-bottom: 10px; float: left;">
								<label
									style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Department
									Short Description <font color="red">*</font>
								</label>
								<s:textarea name="shortDesc" style="width: 52%"></s:textarea>
							</p>

							<p class="colx2-left"
								style="width: 100%; margin-bottom: 10px; float: left;">
								<label
									style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Lead
									Contact</label>
								<s:textfield name="firstname" required="true"
									style="width: 40%;" id="lu.contactName" disabled="true" />
								<a href="javascript: void(0);" style="width: 20%"
									onclick="return popitup('search.action?contact.firstName=&contact.surName=')">Lookup</a>
							</p>
							<p class="colx2-left"
								style="width: 100%; margin-bottom: 10px; float: left;">
								<label
									style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Copy
									address from</label> <input type="radio" name="copyAddr"
									value="organisation">Organisation <input type="radio"
									name="copyAddr" value="parent" style="margin-left: 90px">Parent
							</p>
							<p class="colx2-left"
								style="width: 100%; margin-bottom: 10px; float: left;">
								<label
									style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Address
									Line 1</label>
								<s:textfield name="addr1" required="true" style="width: 52%;"
									id="lu.address_line1" />
							</p>

							<p class="colx2-left"
								style="width: 100%; margin-bottom: 10px; float: left;">
								<label
									style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Address
									Line 2</label>
								<s:textfield name="addr2" required="true" style="width: 52%;"
									id="addressLine2" />
							</p>
							<p class="colx2-left"
								style="width: 100%; margin-bottom: 10px; float: left;">
								<label
									style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Address
									Line 3</label>
								<s:textfield name="addr3" required="true" style="width: 52%;"
									id="addressLine3" />
							</p>

							<p class="colx2-left"
								style="width: 100%; margin-bottom: 10px; float: left;">
								<label for="complex-en-url"
									style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Postcode</label>
								<s:textfield name="postCode" required="true" style="width: 40%;"
									id="lu.postCode" disabled="false" />
								<a href="javascript: void(0);"
									onclick="return popitup('add_lookup.action?address.postCode=&address.addressName=&address.townName=')">Lookup</a>
							</p>

							<p class="colx2-left"
								style="width: 100%; margin-bottom: 10px; float: left;">
								<label
									style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Town/Village/City</label>
								<s:textfield name="townName" required="true" style="width: 52%;"
									id="lu.townName" disabled="false" />
							</p>

							<p class="colx2-left"
								style="width: 100%; margin-bottom: 10px; float: left;">
								<label
									style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">County</label>
								<s:textfield name="countyName" required="true"
									style="width: 52%;" id="lu.countyName" disabled="fasle" />
							</p>
							<p class="colx2-left"
								style="width: 100%; margin-bottom: 10px; float: left;">
								<label for="complex-en-url"
									style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Nation/Country</label>
								<select name="countryName" style="width: 53%;"
									id="lu.countryName">
									<option value="-1"></option>
									<option value="Vietnam">Vietnam</option>
									<option value="Russia">Russia</option>
									<option value="Malaysia">Malaysia</option>
									<option value="USA">USA</option>
								</select>
							</p>
						</div>


						<!-- right -->


						<div style="float: right; width: 48%">

							<p class="colx2-right" style="width: 100%; margin-bottom: 10px;">
								<label
									style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Type
									of Bussiness </label>
								<s:textfield name="businessName" required="true"
									style="width: 38%;" id="lu.businessName" disabled="true" />
								<a href="javascript: void(0);"
									onclick="return popitup('bus_lookup.action?business.businessName=&business.sicCode=')">Lookup</a>
							</p>


							<p class="colx2-right" style="width: 100%; margin-bottom: 10px;">
								<label
									style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
									SIC Code</label>
								<s:textfield name="lu.sicCode" required="true"
									style="width: 50%;" id="lu.sicCode" disabled="true" />

							</p>

							<p class="colx2-right" style="width: 100%; margin-bottom: 10px;">
								<label
									style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
									Department Full Description</label>
								<s:textarea name="fullDesc" style="width: 50%;"></s:textarea>
							</p>

							<p class="colx2-right" style="width: 100%; margin-bottom: 10px;">
								<label
									style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
									Phone Number</label>
								<s:textfield name="phoneNumber" cssClass="full-width"
									style="width: 52%;"></s:textfield>
							</p>
							<p class="colx2-right" style="width: 100%; margin-bottom: 10px;">
								<label
									style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
									Fax</label>
								<s:textfield name="fax" cssClass="full-width"
									style="width: 52%;"></s:textfield>
							</p>
							<p class="colx2-right" style="width: 100%; margin-bottom: 10px;">
								<label
									style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
									Email</label>
								<s:textfield name="email" cssClass="full-width"
									style="width: 52%;"></s:textfield>
							</p>
							<p class="colx2-right" style="width: 100%; margin-bottom: 10px;">
								<label
									style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
									Web Address</label>
								<s:textfield name="webAddr" cssClass="full-width"
									style="width: 52%;"></s:textfield>
							</p>
							<p class="colx2-right" style="width: 100%; margin-bottom: 10px;">

							</p>
							<p class="colx2-right" style="width: 100%; margin-bottom: 10px;">
							</p>
							<p class="colx2-right">
						</p>
						</div>
					</div>
					<!--End #tab-details1-->



				</div>
			</div>

		</div>

	</form>
</div>
</section>
</body>
</html>